<template>
  <div class="card-box">
    <div class="home-title">领导批示、检查整改、问题交办按单位汇总</div>
    <div class="chart-wrapper">
      <div id="summaryUnit"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    setOption() {
      let formatData;
      if (this.chartData) {
        formatData = formatter(this.chartData);
      }

      let option = {
        color: [
          "#91cc75",
          "#fac858",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
        ],
        series: {
          type: "sunburst",
          data: formatData,
          // data: data,
          radius: [0, "95%"],
          sort: undefined,
          emphasis: {
            focus: "ancestor",
          },
          levels: [
            {},
            {
              r0: "15%",
              r: "35%",
              itemStyle: {
                borderWidth: 2,
              },
              label: {
                rotate: "tangential",
              },
            },
            {
              r0: "35%",
              r: "70%",
              label: {
                align: "right",
              },
            },
            {
              r0: "70%",
              r: "72%",
              label: {
                position: "outside",
                padding: 3,
                silent: false,
              },
              itemStyle: {
                borderWidth: 3,
              },
            },
          ],
        },
      };

      option && this.chart.setOption(option);
    },
  },
  mounted() {
    let dom = document.getElementById("summaryUnit");
    this.chart = this.$echarts.init(dom);

    window.addEventListener("resize", () => {
      this.chart.resize();
    });

    this.setOption();
  },
  watch: {
    chartData(newVal) {
      if (newVal && this.chart) {
        this.setOption();
      }
    },
  },
};

// value string to int
function formatter(arr) {
  return arr.map((i) => {
    if (i.children && i.children.length > 0) {
      i.children = formatter(i.children);
      return i;
    }

    if (i.value) {
      i.value = parseInt(i.value);
    }
    return i;
  });
}

var data = [
  {
    name: "问题交办",
    itemStyle: {
      color: "#da0d68",
    },
    children: [
      {
        name: "发改局",
        value: 1,
        itemStyle: {
          color: "#c78869",
        },
      },
      {
        name: "粮食局",
        value: 3,
        itemStyle: {
          color: "#bb764c",
        },
      },
    ],
  },
  {
    name: "领导批示",
    itemStyle: {
      color: "rgb(238,116,120)",
    },
    children: [
      {
        name: "陶朱街道",
        value: 3,
        itemStyle: {
          color: "#c78869",
        },
      },
      {
        name: "卫健局",
        value: 1,
        itemStyle: {
          color: "#bb764c",
        },
      },
    ],
  },
  {
    name: "检查整改",
    itemStyle: {
      color: "#e65832",
    },
    children: [
      {
        name: "建设集团",
        itemStyle: {
          color: "#d45a59",
        },
      },
      {
        name: "城投公司",
        value: 1,
        itemStyle: {
          color: "rgb(10,163,181)",
        },
      },
      {
        name: "中介公司",
        value: 1,
        itemStyle: {
          color: "#f37674",
        },
      },
      {
        name: "XX街道",
        value: 1,
        itemStyle: {
          color: "#e75b68",
        },
      },
      {
        name: "测试部门",
        value: 1,
        itemStyle: {
          color: "#d0545f",
        },
      },
    ],
  },
];
</script>

<style lang="scss" scoped>
@import "./home.scss";
</style>